<template>
  <video :src="video" controls />
  <br />
  <button @click="transcode">Start</button>
  <p>{{ message }}</p>
</template>

<script lang="ts">
import { FFmpeg } from '@ffmpeg/ffmpeg'
import type { LogEvent } from '@ffmpeg/ffmpeg/dist/esm/types'
import { fetchFile, toBlobURL } from '@ffmpeg/util'
import { defineComponent, ref } from 'vue'

const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm'
// const videoURL = 'https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-15s.avi'
const videoURL = 'http://localhost:5173/test12345.mp4'

export default defineComponent({
  name: 'App',
  setup() {
    const ffmpeg = new FFmpeg()
    const message = ref('Click Start to Transcode')
    let video = ref('')

    async function transcode() {
      message.value = 'Loading ffmpeg-core.js'
      ffmpeg.on('log', ({ message: msg }: LogEvent) => {
        message.value = msg
      })
      await ffmpeg.load({
        coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
        wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
        workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
      })
      message.value = 'Start transcoding'
      await ffmpeg.writeFile('input.mp4', await fetchFile(videoURL))

      // const fontFile = await fetchFile('/fonts/DejaVuSans.ttf');
      // await ffmpeg.writeFile('DejaVuSans.ttf', fontFile);
      // console.log(
      //   '字体映入', '视频引入', ffmpeg.exec
      // );
      // // await ffmpeg.exec([
      // //   '-i', 'input.mp4',
      // //   '-vf', "drawtext=fontfile=DejaVuSans.ttf: text='%{pts\:hms}': x=10: y=10: fontcolor=white: fontsize=24: box=1: boxcolor=black@0.5",
      // //   'output.mp4'
      // // ]);
      // console.log(
      //   'exec完成'
      // );
      // message.value = 'Complete transcoding';
      // const data = await ffmpeg.readFile('output.mp4');
      // video.value = URL.createObjectURL(new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' }));
      await ffmpeg.exec(['-i', 'input.mp4'], (err, stdout, stderr) => {
        if (err) {
          console.error('Error extracting metadata:', err);
          return;
        }
        console.log(stderr, 'stderr');

        // 从stdout或stderr中解析元数据（具体取决于FFmpeg的输出）
        // metadata = stderr; // 示例：将stderr作为元数据显示（通常包含有用信息）

        // 读取文件并设置为视频源（如果需要）
        // const videoData = await ffmpeg.readFile(inputName);
        // videoSrc = URL.createObjectURL(new Blob([videoData.buffer], { type: 'video/mp4' }));
      })
      // const data = await ffmpeg.readFile('input.mp4', 'utf8')
      // const data = await ffmpeg.readFile('input.mp4')
      // console.log(data, 'data', new Blob([(data as Uint8Array).buffer]), (data as Uint8Array).buffer);

      // await ffmpeg.exec(['-i', 'input.mp4'])
      // message.value = 'Complete transcoding'
      // const data = await ffmpeg.readFile('test.mp4')
      // video.value = URL.createObjectURL(new Blob([(data as Uint8Array).buffer], { type: 'video/mp4' }))
    }
    return {
      video,
      message,
      transcode
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>